<template>
	<div class="zh-platform-role">
		<nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
                <div class="zh-open-left fl"  v-if="$store.state.checkLevel">
					<div class="open-width">
						<el-input v-model="keyword" placeholder="角色名称" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="primary" @click="saveRoleBox(null)">新增角色</el-button>
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
			    :element-loading-text="loading.txt">
				<el-table
				    :data="listData"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="index"
                      :index="typeIndex"
				      label="序号"
				      align="center"
				      show-overflow-tooltip
				      width="50"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="角色"
				      align="center"
                      width="300"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="remark"
				      label="角色描述"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="5"
				      label="操作"
				      align="center"
				      width="330"
				      >
				      	<template slot-scope="scope">
				      		<template v-if="parseInt(scope.row.id) > 8">
				      			<el-button v-if="scope.row.base_id === 0" @click="saveRoleBox(scope.row)" type="text">编辑</el-button>
				      		</template>			      	        
			      	        <el-button @click="permission(scope.row)" type="text">权限设置</el-button>
			      	        <!-- <el-button @click="getRoleUser(scope.row)" type="text">授权管理</el-button> -->
			      	        <template v-if="parseInt(scope.row.id) > 8">
			      	        	<el-button v-if="scope.row.base_id === 0" @click="deleteRole(scope.row)" type="text" class="delete-button">删除</el-button>
			      	        </template>
			      	    </template>
				    </el-table-column>
				</el-table>
                
				<div class="table-pagination" v-show="total_number > 10"> 
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
		<!-- 新增角色 -->
		<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="roleTitle" :visible.sync="addRole" class="addRole" width="450px">
			<el-form :model="addForm" ref="addForm" status-icon :rules="rules" label-position="left" label-width="80px">
			    <el-form-item label="角色名称" prop="name">
			      	<el-input 
			      		v-model="addForm.name" 
			      		placeholder="请输入角色名称，不超过个15个字符" 
			      		autocomplete="off" 
			      		:maxlength="parseInt(15)"
			      		clearable>
			      	</el-input>
			    </el-form-item>
				<el-form-item label="角色描述" prop="remark">
					<div class="area-box">
                        <el-input
                            type="textarea"
                            placeholder="请输入角色描述"
                            v-model="addForm.remark"
                            maxlength="140"
                            :rows="8"
                            show-word-limit>
                        </el-input>
					</div>
			    </el-form-item> 
                <div v-if="$store.state.platformInformation">适用于：<span style="padding-left: 25px">{{user_name}}</span></div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addRole = false">取消</el-button>
			    <el-button type="primary" @click="saveRole">确定</el-button>
			</div>
		</el-dialog>
		<!-- 授权管理 -->
		<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="授权管理" :visible.sync="authorized" class="authorized" width="450px">
			<el-form :model="authorizedForm" ref="authorizedForm" :rules="rules" status-icon label-position="left" label-width="100px">
			    <el-form-item label="角色名称" class="fromWidth">
			      	<el-input 
			      		v-model="roleUserParam.role_name" 
			      		autocomplete="off" 
			      		:disabled="true">
			      	</el-input>
			    </el-form-item>
			    <el-form-item label="授权人员">
		      		<el-tag
			      	  :key="inx"
			      	  v-for="(item,inx) in roleUserData"
			      	  closable
			      	  :disable-transitions="false"
			      	  @close="delRoleUser(inx)">
			      	  {{item.name}}
			      	</el-tag>
			    </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="authorized = false">取消</el-button>
			    <el-button type="primary" @click="">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
		    	listData:[],
		    	listParam:{
                    data_type:2,
                    keyword:'',
		    		page:1,
		    		size:10,
		    	},
		    	roleUserParam:{
		    		role_id:0,
		    		status:[1,3]
		    	},
				roleUserData:[],
		    	total_number:0,
		    	roleUserLoading:{
		    		status:false,
		    		txt:'获取用户...'
		    	},
 				authorized: false,	        
                addRole: false,
                addForm: {
                	name: '',
                	remark: '',
                },
                rules: {
                	name: [
        	            { validator: this.validateName, trigger: 'blur', required: true }
        	        ],
        	        remark: [
        	            { validator: this.validateDescription, trigger: 'blur', required: true }
        	        ],
                },
                roleTitle:'新增角色',
                authorized: false,
                authorizedForm: {
                	name: '获取显示角色名称，不允许修改',
                },
               	// descriptionCateTag: [{name: '1'},{name: '2'},{name: '3'}],
               	keyword: '',
               	user_name: this.$store.getters.userInfo.platform_name,
		    }
		},
		created(){
			this.getList();
		},
		watch:{
			addRole() {
				if (this.addRole === false) 
					this.$refs.addForm.resetFields()
			}
		},
		methods: {
            searchFunc() {
                this.listParam.keyword = this.keyword;
				this.listParam.page = 1;
                this.getList();
            },
            reset() {
                this.keyword = '';
				this.listParam = {
		    		keyword:'',
                    page:1,
                    size:10,
                    data_type: 2
	            };
				this.getList();
            },
			//添加 || 修改角色弹框
			saveRoleBox(obj = null){
				if( is_empty(obj) ){
					this.roleTitle = '添加角色';
					this.addForm.id = 0;
					this.addForm.name = '';
					this.addForm.remark = '';
				}else{
					this.roleTitle = '编辑角色';
					this.addForm.id = obj.id;
					this.addForm.name = obj.name;
					this.addForm.remark = obj.remark;
				}
				this.addRole = true;
				
			},
			saveRole(){
				this.$refs.addForm.validate((valid) => {
	     			if (valid) {
				    	let success = ( data => {
				    		this.$message.success( data.msg) ;
							this.getList();
							this.addRole = false;
						});
						if( parseInt(this.addForm.id) > 0 ){
							this.$ajax.put('api/role/role',this.addForm,{func:{success:success}})
						}else{
							this.$ajax.post('api/role/role',this.addForm,{func:{success:success}})
						}
				    } else {
		  				return false
		  			}
		  		});
			},
			//删除角色
			deleteRole(obj){
				let yes = ( data => {
					let success = ( data => {
						this.$message.success(data.msg)
						if(this.listData.length === 1 && this.listParam.page > 1  ){
							this.listParam.page--;
						}
						this.getList();
					});
	  				this.$ajax.delete('api/role/role',{params:{id:obj.id},func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});
			},
			//删除用户
			delRoleUser(tag) {
	            this.roleUserData.splice(tag, 1);
	        },
	        //获取角色用户
			getRoleUser(obj){
				this.roleUserParam.role_id = obj.id;
				this.roleUserParam.role_name = obj.name;
				this.authorized = true
				this.roleUserLoading = true;
				// 重写成功回调
				let success = ( data => {
					this.roleUserLoading = false;
					this.roleUserData = data.data;
				});
				let fail = ( data => {
					this.roleUserLoading = false;
				});
  				this.$ajax.get('api/user/user',{params:this.roleUserParam,func:{success:success,fail:fail}})
			},
			//获取列表数据
			getList(){
				this.loading.status = true
		    	// 重写成功回调
				let success = ( data => {
					this.loading.status = false
					this.listData = data.data.data;
					this.total_number = data.data.data_sum;
				});
				let fail = ( data => {
					this.loading.status  = false;
					this.$message.error(data.msg)
				})
  				this.$ajax.get('api/role/role',{params:this.listParam,func:{success:success,fail:fail}})	    	
		    },
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page - 1) * this.listParam.size + 1;
            },
			permission(row){
				this.$router.push("/user/user/permission/"+row.id)
			},
			validateName(rule, value, callback){
				if (value === '') {
                  	return callback(new Error('请输入角色名称'));
                } else if (!validateName(value)){
                	return callback(new Error('不能输入空格符号'));
                } else {
                	callback()
                }
			},
			validateDescription(rule, value, callback){
				if (value === '') {
                  	return callback(new Error('请输入角色描述'));
                } else if (!validateName(value)){
                	return callback(new Error('不能输入空格符号'));
                } else {
                	callback()
                }
			},
		    handleSizeChange(val) {
		    	 this.listParam.page = 1;
		    	this.listParam.size = val;
		    	this.getList();
		    },
		    handleCurrentChange(val) {
		        this.listParam.page = val;
		        this.getList();
		    },
		},
  	}
</script>
<style lang="scss">
	.zh-platform-role {
		.el-table__body-wrapper table tbody {
			td:nth-child(5) {
				padding: 0;
			}
		}
		.authorized {
			.el-tag {
				margin-right: 10px;
			}
		}

        // thead {
        //     th {
        //         background: #DDDDDD;
        //     }
        // }

        // .el-table--border::after {
        //     display: none;
        // }
	}
	.area-box {
		position: relative;
    }
    // .el-message-box__message {
    //     white-space: pre;
    //     text-align: center;
    // }
</style>